<script setup>
import {
  addOperationApi, adjustOperationApi,
  confirmOperationApi, deleteOperationApi,
  queryOperationDetailByIdApi,
  queryOperationsByPageApi
} from '@/api/warehouseOperations'
import {queryEntryUpSkuPageApi} from '@/api/warehousingEntryUp'
import {queryWarehouseAreaLocalByPageApi} from '@/api/warehouseAreaLocal'
import {getAllUser} from "@/api/user";
import {querySkuPageApi} from "@/api/item";
import {
  CopyDocument,
  Delete,
  DocumentRemove,
  Plus,
  Remove,
  TrendCharts,
  UploadFilled,
  View
} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {onMounted, ref} from "vue";


// 用户列表
const userList = ref([])
const getAllUserList = async () => {
  const result = await getAllUser()
  userList.value = result.data
}
// 状态列表
const statusList = ref([
  {
    id: '1',
    label: '未确认'
  },
  {
    id: '2',
    label: '已确认'
  },
  {
    id: '3',
    label: '已调整'
  }
])
// 类型列表
const categoryList = ref([
  {label: '拆分作业', value: '1'},
  {label: '组合作业', value: '2'}
])
// 搜索框
const searchForm = ref({
  jobCode: '',
  status: ''
})
const dataList = ref([])
// 查询按钮
const searchPage = async () => {
  const result = await queryOperationsByPageApi(searchForm.value.jobCode, searchForm.value.status, currentPage.value, pageSize.value)
  dataList.value = result.data.rows
  total.value = result.data.total
}
// 清除按钮
const clean = () => {
  searchForm.value = {
    jobCode: '',
    status: ''
  }
  searchPage()
}


// 分页
const size = ref('default')
const background = ref(false)
const disabled = ref(false)
const currentPage = ref(1)
const pageSize = ref(5)
const total = ref(0)
const handleSizeChange = (val) => {
  currentPage.value = 1
  pageSize.value = val
  searchPage()
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  searchPage()
}

const skuDetailList = ref([])
const sourceData = ref([])
const targetData = ref([])
const flag = ref(true)
// 查看详情按钮
const showDetail = async (row) => {
  const result = await queryOperationDetailByIdApi(row.id)
  if (result) {
    const result = await queryOperationDetailByIdApi(row.id)
    sourceData.value = result.data.sources
    targetData.value = result.data.targets
    dialogTitle.value = result.data.category === '1' ? '拆分作业详情' : '组合作业详情'
    sourceData.value.forEach(item => {
      skuEntryUpData.value.push({
        skuId: item.skuId,
        title: item.title,
        code: item.code,
        warehouseName: item.targetWarehouseName,
        warehouseAreaName: item.targetWarehouseAreaName,
        warehouseAreaLocaCode: item.targetWarehouseAreaLocaCode,
        count: item.sourceCount,
        productWeight: item.productWeight,
        productVolume: item.productVolume,
        productLength: item.productLength,
        productWidth: item.productWidth,
        productHeight: item.productHeight,
        realPrice: item.realPrice,
        price: item.price
      })
      submitForm.value.sources.push({
        skuId: item.skuId,
        sourceCount: item.sourceCount,
        price: item.price,
        targetWarehouseId: item.targetWarehouseId,
        targetWarehouseAreaId: item.targetWarehouseAreaId,
        targetWarehouseAreaLocaId: item.targetWarehouseAreaLocaId,
      })
    })
    targetData.value.forEach(item => {
      skuDetailList.value.push({
        id: item.skuId,
        title: item.title,
        code: item.code,
        productWeight: item.productWeight,
        productVolume: item.productVolume,
        productLength: item.productLength,
        productWidth: item.productWidth,
        productHeight: item.productHeight,
        realPrice: item.realPrice,
        price: item.price
      })
      submitForm.value.targets.push({
        skuId: item.skuId,
        targetCount: item.targetCount,
        price: item.price,
        targetWarehouseId: item.targetWarehouseId,
        targetWarehouseAreaId: item.targetWarehouseAreaId,
        targetWarehouseAreaLocaId: item.targetWarehouseAreaLocaId,
        targetwarehouseAreaLocaCode: item.targetwarehouseAreaLocaCode
      })
    })
    flag.value = true
    dialogVisible.value = true
  }
}


// 拆分\组合作业对话框
const dialogVisible = ref(false)
const dialogTitle = ref('')
const innerVisible = ref(false)
const type = ref(0)
const outerVisible = ref(false)

// 拆分/组合作业方法
const addBox = (types) => {
  if (types === 1) {
    submitForm.value.category = '1'
    submitForm.value.sources = []
    submitForm.value.targets = []
    type.value = types
    dialogTitle.value = '拆分作业'
    dialogVisible.value = true
  } else if (types === 2) {
    submitForm.value.category = '2'
    submitForm.value.sources = []
    submitForm.value.targets = []
    type.value = types
    dialogTitle.value = '组合作业'
    dialogVisible.value = true
  }
  // 清空相关数组，确保新打开的对话框是干净的
  skuEntryUpData.value = []
  skuDetailList.value = []
  flag.value = false
}

//确认作业方法
const confirmWork = (row) => {
  ElMessageBox.confirm(
      '是否确认进行确认作业处理?',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(async () => {
    const result = await confirmOperationApi(row.id)
    if (result.code === 1) {
      ElMessage.success('确认成功')
      searchPage()
    } else {
      ElMessage.error('确认失败')
    }
  })
}

//调整作业方法
const confirmAdjust = (row) => {
  ElMessageBox.confirm(
      '是否确认进行库存调整处理?',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(async () => {
    const result = await adjustOperationApi(row.id)
    if (result.code === 1) {
      ElMessage.success('调整成功')
      searchPage()
    } else {
      ElMessage.error('调整失败')
    }
  })
}

//删除作业方法
const deleteOperation = (row) => {
  ElMessageBox.confirm(
      '是否确认进行删除作业处理?',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(async () => {
    const result = await deleteOperationApi(row.id)
    if (result.code === 1) {
      ElMessage.success('删除成功')
      searchPage()
    } else {
      ElMessage.error('删除失败')
    }
  })
}


const submitForm = ref({
  category: '',
  sources: [],
  targets: []
})
const skuSearchForm = ref({
  title: '',
  code: ''
})
const skuList = ref([])

// 选择库存方法
const showWarehouseEntryUpBox = () => {
  innerVisible.value = true
  querySkuPage()
}
//TODO 选择库存获取的所有sku数据
const querySkuPage = async () => {
  const result = await queryEntryUpSkuPageApi(skuSearchForm.value.title, skuSearchForm.value.code, pageN.value, pageS.value)
  skuList.value = result.data.rows
  tot.value = result.data.total
}


// 选择库存跟规格数据定义
const skus = ref([])
const getSkuSelect = (selection) => {
  skus.value = selection.map((item) => {
    return item;
  })
}
const skuEntryUpData = ref([])
// 选择商品规格方法
const showSkuBox = () => {
  outerVisible.value = true
  queryAllSku()
}
const saveSelect = () => {
  innerVisible.value = false
  if (type.value === 1 && skuEntryUpData.value.length < 1) {
    skuEntryUpData.value.push(skus.value[0])
    skuEntryUpData.value[0].count = skuEntryUpData.value[0].count > 0 ? 1 : 0
    submitForm.value.sources.push({
      skuId: String(skus.value[0].skuId),
      sourceCount: skus.value[0].count > 0 ? 1 : 0,
      price: skus.value[0].price,
      targetWarehouseId: skus.value[0].warehouseId,
      targetWarehouseAreaId: skus.value[0].warehouseAreaId,
      targetWarehouseAreaLocaId: skus.value[0].warehouseAreaLocaId,
    })
  }
  if (type.value === 2) {
    skus.value.forEach(item => {
      if (submitForm.value.sources.find(de => de.skuId === String(item.skuId)) === undefined) {
        skuEntryUpData.value.push(item)
        submitForm.value.sources.push({
          maxCount: item.count,
          skuId: String(item.skuId),
          sourceCount: item.count,
          price: item.price,
          targetWarehouseId: item.warehouseId,
          targetWarehouseAreaId: item.warehouseAreaId,
          targetWarehouseAreaLocaId: item.warehouseAreaLocaId,
        })
      }
    })
  }
}


//删除选中的库存
function deleteSkuEntryUp(index) {
  skuEntryUpData.value.splice(index, 1)
  submitForm.value.sources.splice(index, 1)
}

function deleteSku(index) {
  skuDetailList.value.splice(index, 1)
  submitForm.value.targets.splice(index, 1)
}


const targetIndex = ref(0)

function openLoca(index) {
  getWarehouseAreaLocaAll()
  dialogShow.value = true
  targetIndex.value = index
}


// 目标
const cleanLoca = (index) => {
  submitForm.value.targets[index].targetWarehouseAreaLocaId = ''
  submitForm.value.targets[index].targetWarehouseId = ''
  submitForm.value.targets[index].targetWarehouseAreaId = ''
  submitForm.value.targets[index].targetwarehouseAreaLocaCode = ''
}


// 选择商品 TODO
const skSearchForm = ref({
  title: '',
  code: ''
})
const skuAllList = ref([])
const queryAllSku = async () => {
  const result = await querySkuPageApi(skSearchForm.value.title, skSearchForm.value.code, pageNu.value, pageSi.value)
  skuAllList.value = result.data.rows
  tota.value = result.data.total
}

function cleanSkForm() {
  skSearchForm.value = {
    title: '',
    code: ''
  }
  queryAllSku()
}


const skuD = ref([])

function getSkSelect(selection) {
  skuD.value = selection.map((item) => {
    return item;
  })
}

const pageNu = ref(1)
const pageSi = ref(5)
const tota = ref(0)
const sizeC = (val) => {
  pageNu.value = 1
  pageS.value = val
  queryAllSku()
}
const currentC = (val) => {
  console.log(`current page: ${val}`)
  pageN.value = val
  queryAllSku()
}

function saveSkSelect() {
  outerVisible.value = false
  skuD.value.forEach(item => {
    if (submitForm.value.targets.find(de => de.skuId === String(item.id)) === undefined) {
      skuDetailList.value.push(item)
      submitForm.value.targets.push({
        skuId: String(item.id),
        targetCount: '',
        price: item.price,
        targetWarehouseId: '',
        targetWarehouseAreaId: '',
        targetWarehouseAreaLocaId: ''
      })
    }
  })
}

const dialogShow = ref(false)
const currentRow = ref()

function handleCurrentRowChange(val) {
  currentRow.value = val
}

const pageNo = ref(1)
const pageSiz = ref(10)
const toDo = ref(0)
const changeSize = (val) => {
  console.log(`${val} items per page`)
  pageS.value = val
  getWarehouseAreaLocaAll()
}
const changeCurrent = (val) => {
  console.log(`current page: ${val}`)
  pageN.value = val
  getWarehouseAreaLocaAll()
}
const locaSearchForm = ref({
  warehouseName: '',
  warehouseAreaName: '',
  localCode: '',
})
const warehouseAreaLocaList = ref([])

async function getWarehouseAreaLocaAll() {
  const result = await queryWarehouseAreaLocalByPageApi(locaSearchForm.value.warehouseName, locaSearchForm.value.warehouseAreaName, locaSearchForm.value.localCode, pageNo.value, pageSiz.value, 1);
  warehouseAreaLocaList.value = result.data.rows
  toDo.value = result.data.total
}

function cleanLocaSearchForm() {
  locaSearchForm.value = {
    warehouseName: '',
    warehouseAreaName: '',
    localCode: '',
  }
  getWarehouseAreaLocaAll()
}

function saveWlSelect() {
  for (let target of submitForm.value.targets) {
    if (target.targetWarehouseAreaLocaId === currentRow.value.id) {
      ElMessage.error('不能选择已被选择的库位')
      targetIndex.value = 0
      return;
    }
  }
  submitForm.value.targets[targetIndex.value].targetWarehouseAreaLocaId = currentRow.value.id
  submitForm.value.targets[targetIndex.value].targetWarehouseId = currentRow.value.warehouseId
  submitForm.value.targets[targetIndex.value].targetWarehouseAreaId = currentRow.value.warehouseAreaId
  submitForm.value.targets[targetIndex.value].targetwarehouseAreaLocaCode = currentRow.value.localCode
  dialogShow.value = false
  targetIndex.value = 0
}

function cleanSkuForm() {
  skuSearchForm.value = {
    title: '',
    code: ''
  }
  querySkuPage()
}


function back() {
  submitForm.value = {
    category: '',
    sources: [],
    targets: []
  }
  skuEntryUpData.value = []
  skuDetailList.value = []
  dialogVisible.value = false
  flag.value = true
}

async function save() {
  for (let source of submitForm.value.sources) {
    if (source.sourceCount === '' || source.sourceCount <= 0) {
      ElMessage.error('请输入作业数量')
      return;
    }
  }
  for (let target of submitForm.value.targets) {
    if (target.targetCount === '' || target.targetCount <= 0) {
      ElMessage.error('请输入作业数量')
      return;
    }
    if (target.targetWarehouseAreaLocaId === '' || target.targetWarehouseAreaLocaId == null) {
      ElMessage.error('请选择目标库位')
      return;
    }
  }
  const result = await addOperationApi(submitForm.value)
  if (result.code === 1) {
    ElMessage.success('添加成功')
    dialogVisible.value = false
    back()
    searchPage()
  } else {
    ElMessage.error('添加失败')
  }
}


// 子分页
const pageN = ref(1)
const pageS = ref(5)
const tot = ref(0)
const SizeChange = (val) => {
  pageN.value = 1
  pageS.value = val
  querySkuPage()
}
const CurrentChange = (val) => {
  pageN.value = val
  querySkuPage()
}

onMounted(() => {
  searchPage()
  getAllUserList()
})
</script>

<template>
  <div><h3>仓内加工</h3></div>
  <div class="bo">
    <el-main>
      <el-form :model="searchForm" label-width="10px">
        <el-row gutter="3">
          <el-col :span="4">
            <el-form-item>
              <el-select v-model="searchForm.status" placeholder="请选择作业状态" clearable>
                <el-option
                    v-for="item in statusList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-input v-model="searchForm.jobCode" placeholder="请输入作业单号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-button type="primary" @click="searchPage">查询</el-button>
            <el-button @click="clean">清空</el-button>
          </el-col>
        </el-row>
      </el-form>
      <div class="btg" style="margin: 5px auto">
        <el-tooltip
            class="box-item"
            effect="dark"
            content="拆分作业"
            placement="bottom"
        >
          <el-button type="primary" :icon="CopyDocument" @click="addBox(1)" circle></el-button>
        </el-tooltip>
        <el-tooltip
            class="box-item"
            effect="dark"
            content="组合作业"
            placement="bottom"
        >
          <el-button type="primary" :icon="DocumentRemove" @click="addBox(2)" circle></el-button>
        </el-tooltip>
      </div>
      <el-table :data="dataList">
        <el-table-column label="序号" type="index" width="70" align="center"/>
        <el-table-column property="jobCode" label="作业单号" width="200" align="center"/>
        <el-table-column label="类型" width="120" align="center">
          <template #default="scope">
            <span v-for="ca in categoryList" v-show="ca.value===scope.row.category">{{ ca.label }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="120" align="center">
          <template #default="scope">
            <span v-for="st in statusList" v-show="st.id===scope.row.status">{{ st.label }}</span>
          </template>
        </el-table-column>
        <el-table-column label="盘点员工" width="120" align="center">
          <template #default="scope">
            <span v-for="user in userList" v-show="user.id===scope.row.empId">{{ user.name }}</span>
          </template>
        </el-table-column>
        <el-table-column property="createTime" label="创建时间" width="200" align="center"/>
        <el-table-column label="操作" fixed="right" align="center">
          <template #default='{row}'>
            <el-tooltip
                class="box-item"
                effect="dark"
                content="作业详情"
                placement="bottom"
            >
              <el-button :icon="View" type="default" circle @click="showDetail(row)"/>
            </el-tooltip>
            <el-tooltip
                class="box-item"
                effect="dark"
                content="确认作业"
                placement="bottom"
            >
              <el-button :icon="TrendCharts" type="primary" circle @click="confirmWork(row)"
                         :disabled="row.status!=='1'"/>
            </el-tooltip>
            <el-tooltip
                class="box-item"
                effect="dark"
                content="确认调整"
                placement="bottom"
            >
              <el-button :icon="UploadFilled" type="success" circle @click="confirmAdjust(row)"
                         :disabled="row.status!=='2'"/>
            </el-tooltip>
            <el-tooltip
                class="box-item"
                effect="dark"
                content="删除作业"
                placement="bottom"
            >
              <el-button :icon="Delete" type="danger" circle @click="deleteOperation(row)"
                         :disabled="row.status!=='1'"/>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer style="height: 10px;">
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 40]"
                     :size="size" :disabled="disabled" :background="background"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </el-footer>
  </div>


  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="1500px">
    <template #default>
      <el-row gutter="5">
        <el-col :span="12">
          <el-row>
            <el-col :span="24" style="align-content: center">
              <span style="margin: 10px 10px">来源</span>
              <el-button @click="showWarehouseEntryUpBox" round :disabled="flag">选择库存</el-button>
            </el-col>
            <el-col :span="24">
              <div style="margin: 5px"></div>
            </el-col>
            <el-col :span="24">
              <div style="padding: 10px;border: #e8e9ee 1px solid;">
                <el-table :data="skuEntryUpData" style="width: 100%" height="430px" stripe>
                  <el-table-column type="index" width="50"/>
                  <el-table-column label="操作" width="100">
                    <template #default="scope">
                      <el-button type="danger" @click="deleteSkuEntryUp(skuEntryUpData.indexOf(scope.row))"
                                 :icon="Delete" :disabled="flag" circle></el-button>
                    </template>
                  </el-table-column>
                  <el-table-column property="title" label="商品名称" width="120"/>
                  <el-table-column property="code" label="商品条码" width="120"/>
                  <el-table-column property="warehouseName" label="所在仓库" width="120"/>
                  <el-table-column property="warehouseAreaName" label="所在库区" width="120"/>
                  <el-table-column property="warehouseAreaLocaCode" label="库位编码" width="120"/>
                  <el-table-column label="商品数量" width="150">
                    <template #default="scope">
                      <el-input-number :min="1" :max="scope.row.count"
                                       v-model="submitForm.sources[skuEntryUpData.indexOf(scope.row)].sourceCount"
                                       placeholder="请输入商品数量" size="default" style="width: 100px"
                                       :disabled="flag"></el-input-number>
                    </template>
                  </el-table-column>
                  <el-table-column property="productWeight" label="商品重量" width="120"/>
                  <el-table-column property="productLength" label="商品长度" width="120"/>
                  <el-table-column property="productWidth" label="商品宽度" width="120"/>
                  <el-table-column property="productHeight" label="商品高度" width="120"/>
                  <el-table-column property="productVolume" label="商品体积" width="120"/>
                  <el-table-column property="price" label="商品价格" width="120"/>
                  <el-table-column property="realPrice" label="商品成本" width="120"/>
                </el-table>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="24" style="align-content: center">
              <span style="margin: 10px 10px">目标</span>
              <el-button @click="showSkuBox" round :disabled="flag">选择规格</el-button>
            </el-col>
            <el-col :span="24">
              <div style="margin: 5px"></div>
            </el-col>
            <el-col :span="24">
              <div style="padding: 10px;border: #e8e9ee 1px solid;">
                <el-table :data="skuDetailList" style="width: 100%" height="430px" stripe>
                  <el-table-column type="index" width="50"/>
                  <el-table-column label="操作" width="100">
                    <template #default="scope">
                      <el-button type="danger" @click="deleteSku(skuDetailList.indexOf(scope.row))" :icon="Delete"
                                 :disabled="flag" circle></el-button>
                    </template>
                  </el-table-column>
                  <el-table-column property="title" label="商品名称" width="120"/>
                  <el-table-column property="code" label="商品条码" width="120"/>
                  <el-table-column property="productWeight" label="商品重量" width="120"/>
                  <el-table-column property="productLength" label="商品长度" width="120"/>
                  <el-table-column property="productWidth" label="商品宽度" width="120"/>
                  <el-table-column property="productHeight" label="商品高度" width="120"/>
                  <el-table-column property="productVolume" label="商品体积" width="120"/>
                  <el-table-column property="price" label="商品价格" width="120"/>
                  <el-table-column property="realPrice" label="商品成本" width="120"/>
                  <el-table-column label="商品数量" width="150">
                    <template #default="scope">
                      <el-input-number :min="1"
                                       v-model="submitForm.targets[skuDetailList.indexOf(scope.row)].targetCount"
                                       placeholder="请输入商品数量" size="default" style="width: 100px"
                                       :disabled="flag"></el-input-number>
                    </template>
                  </el-table-column>
                  <el-table-column label="存放库位" width="200">
                    <template #default="scope">
                      <el-input
                          v-model="submitForm.targets[skuDetailList.indexOf(scope.row)].targetwarehouseAreaLocaCode"
                          type="text" @click="openLoca(skuDetailList.indexOf(scope.row))" readonly :disabled="flag">
                        <template #append>
                          <el-button @click="cleanLoca(skuDetailList.indexOf(scope.row))" :icon="Remove"
                                     :disabled="flag"/>
                        </template>
                      </el-input>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-dialog
          v-model="outerVisible"
          width="1000px"
          title="选择商品规格"
          append-to-body
      >
        <el-form :model="skSearchForm" label-width="150px" :inline="true">
          <el-form-item label="商品名称">
            <el-input v-model="skSearchForm.title" type="text" placeholder="请输入商品名称"/>
          </el-form-item>
          <el-form-item label="商品条码">
            <el-input v-model="skSearchForm.code" type="text" placeholder="请输入商品条码"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="queryAllSku">查询</el-button>
            <el-button @click="cleanSkForm">清空</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="skuAllList" @selection-change="getSkSelect" style="width: 100%" height="430px">
          <el-table-column type="selection" width="55"/>
          <el-table-column type="index" width="50"/>
          <el-table-column property="title" label="商品名称" width="120"/>
          <el-table-column property="code" label="商品条码" width="120"/>
          <el-table-column property="productWeight" label="商品重量" width="120"/>
          <el-table-column property="productLength" label="商品长度" width="120"/>
          <el-table-column property="productWidth" label="商品宽度" width="120"/>
          <el-table-column property="productHeight" label="商品高度" width="120"/>
          <el-table-column property="productVolume" label="商品体积" width="120"/>
          <el-table-column property="price" label="商品价格" width="120"/>
          <el-table-column property="realPrice" label="商品成本" width="120"/>
        </el-table>
        <br>
        <el-pagination class="page" v-model:current-page="pageNu" v-model:page-size="pageSi"
                       :page-sizes="[5, 10, 15]" :size="size" :disabled="false" :background="true"
                       layout="total, sizes, prev, pager, next, jumper" :total="tota" @size-change="sizeC"
                       @current-change="currentC"/>
        <template #footer>
          <div class="dialog-footer1">
            <el-button @click="outerVisible = false">取消</el-button>
            <el-button type="primary" @click="saveSkSelect">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
      <el-dialog
          v-model="dialogShow"
          width="1000px"
          title="选择库位"
          append-to-body
      >
        <el-form :model="locaSearchForm" label-width="100px">
          <el-row gutter="3">
            <el-col :span="6">
              <el-form-item label="仓库名字">
                <el-input v-model="locaSearchForm.warehouseName" type="text"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="库区名字">
                <el-input v-model="locaSearchForm.warehouseAreaName" type="text"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="库位编号">
                <el-input v-model="locaSearchForm.localCode" type="text"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button type="primary" @click="getWarehouseAreaLocaAll">查询</el-button>
                <el-button @click="cleanLocaSearchForm">清空</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table
            :data="warehouseAreaLocaList"
            highlight-current-row
            style="width: 1000px;height: 430px"
            @current-change="handleCurrentRowChange"
        >
          <el-table-column type="index" width="50"/>
          <el-table-column property="warehouseName" label="所属仓库" width="120"/>
          <el-table-column property="warehouseAreaName" label="所属库区" width="120"/>
          <el-table-column property="category" label="库区类型" width="120"/>
          <el-table-column property="localCode" label="库位编号" width="120"/>
          <el-table-column property="localLength" label="库位长度(m)" width="120"/>
          <el-table-column property="localWidth" label="库位宽度(m)" width="120"/>
          <el-table-column property="localHeight" label="库位高度(m)" width="120"/>
          <el-table-column property="localVolume" label="库位容积(㎥)" width="120"/>
          <el-table-column property="localBearingCapacity" label="库位承重(kg)" width="120"/>
          <el-table-column property="tunnelNumber" label="巷道号" width="120"/>
          <el-table-column property="shelfNumber" label="货架号" width="120"/>
          <el-table-column property="layerNumber" label="层号" width="120"/>
          <el-table-column label="是否有效">
            <template #default="scope">
              <span>{{ scope.row.status === '1' ? '有效' : '无效' }}</span>
            </template>
          </el-table-column>
        </el-table>
        <br>
        <el-pagination class="page" v-model:current-page="pageNo" v-model:page-size="pageSiz"
                       :page-sizes="[5, 10, 15]" :size="size" :disabled="false" :background="true"
                       layout="total, sizes, prev, pager, next, jumper" :total="toDo" @size-change="changeSize"
                       @current-change="changeCurrent"/>
        <template #footer>
          <div class="dialog-footer1">
            <el-button @click="dialogShow = false">取消</el-button>
            <el-button type="primary" @click="saveWlSelect">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
      <el-dialog
          v-model="innerVisible"
          width="1000px"
          title="选择库存"
          append-to-body
      >
        <el-form :model="skuSearchForm" label-width="150px" :inline="true">
          <el-form-item label="商品名称">
            <el-input v-model="skuSearchForm.title" type="text" placeholder="请输入商品名称"/>
          </el-form-item>
          <el-form-item label="商品条码">
            <el-input v-model="skuSearchForm.code" type="text" placeholder="请输入商品条码"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="querySkuPage">查询</el-button>
            <el-button @click="cleanSkuForm">清空</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="skuList" @selection-change="getSkuSelect" style="width: 100%" height="430px">
          <el-table-column type="selection" width="55"/>
          <el-table-column type="index" width="50"/>
          <el-table-column property="title" label="商品名称" width="120"/>
          <el-table-column property="code" label="商品条码" width="120"/>
          <el-table-column property="warehouseName" label="所在仓库" width="120"/>
          <el-table-column property="warehouseAreaName" label="所在库区" width="120"/>
          <el-table-column property="warehouseArealocaCode" label="库位编码" width="120"/>
          <el-table-column property="count" label="商品数量" width="120"/>
          <el-table-column property="productWeight" label="商品重量" width="120"/>
          <el-table-column property="productLength" label="商品长度" width="120"/>
          <el-table-column property="productWidth" label="商品宽度" width="120"/>
          <el-table-column property="productHeight" label="商品高度" width="120"/>
          <el-table-column property="productVolume" label="商品体积" width="120"/>
          <el-table-column property="price" label="商品价格" width="120"/>
          <el-table-column property="realPrice" label="商品成本" width="120"/>
        </el-table>
        <br>
        <el-pagination class="page" v-model:current-page="pageN" v-model:page-size="pageS"
                       :page-sizes="[5, 10, 15]" :size="size" :disabled="false" :background="true"
                       layout="total, sizes, prev, pager, next, jumper" :total="tot" @size-change="SizeChange"
                       @current-change="CurrentChange"/>
        <template #footer>
          <div class="dialog-footer1">
            <el-button @click="innerVisible = false">取消</el-button>
            <el-button type="primary" @click="saveSelect">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
    </template>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="back">取消</el-button>
        <el-button type="primary" @click="save" :disabled="flag">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>